<template>
  <div style="padding: 50px 300px;">
    <!-- 搜索框 -->
    <a-input-search
        v-model:value="searchWord"
        placeholder="请输入搜索关键字"
        enter-button
        @search="onSearch"
    />
    <!-- 展示搜索结果数 -->
    <a-tooltip>
      <template #title>搜索结果数</template>
      <div style="color: gray; margin-top: 15px; font-size: 14px;">一共为您搜索到 {{ docInfoList.length }} 个结果！</div>
    </a-tooltip>
    <!-- 搜索结果列表 -->
    <a-list item-layout="horizontal" :data-source="docInfoList" :loading="loading">
      <template #renderItem="{item}">
        <a-list-item style="margin: 10px auto;">
          <a-list-item-meta
              style="width: 100%;"
              :description="item.desc"
           >
            <template #title>
              <a :href="item.url" target="_blank">{{ item.title }}</a>
            </template>
          </a-list-item-meta>
          <div>
            <a :href="item.url" target="_blank">{{ item.title }}</a>
          </div>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import request from "@/config/request";
const searchWord = ref('');
const docInfoList = ref([]);
const loading = ref(false)

const onSearch = async () => {
  loading.value = "loading";
  const res = await request.get('/doc/search', {
    params: {
      query: searchWord.value
    }
  });
  loading.value = false;
  docInfoList.value = res.data
};

</script>

<style>
</style>
